<template>
     <Card :dis-hover="true">
        <p slot="title">兰州财经大学创新训练申报书</p>
        <Tabs type="card" v-model="tab.value">
            <Button v-if="tab.value !== '5'" v-show="!tpl" slot="extra"  type="primary" ghost @click="next">下一页</Button>
            <Button v-else slot="extra" v-show="!tpl" type="primary" ghost @click="submit">保存</Button>
            <TabPane name="0"  ref="pane0" label="项目基本信息">
                <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目基本信息</div>
                    </md-card-header>
                     <md-card-content>
                    <form novalidate>
                      <div class="md-layout md-gutter">
                        <div class="md-layout-item md-small-size-100">
                          <md-field>
                            <label>项目名称</label>
                            <md-input v-model.trim="article.Name" md-counter="30"></md-input>
                          </md-field>
                        </div>
                        <div class="md-layout-item md-small-size-100">
                          <md-field>
                            <label>一级学科</label>
                            <!-- <md-input v-model.trim="article.SubjectId" md-counter="30"></md-input> -->
                            
                           
                              <!-- <Select v-model="article.SubjectId" >
                                <Option v-for="item in subject" :value="item.Code" :key="item.Id"><span>{{item.Subject}}</span></Option>
                              </Select> -->
                            <md-select  v-model="article.SubjectId" name="subject" id="subject" @md-selected="subjectChangehandler">
                              <md-option v-for="item in subject" :value="item.Code" :key="item.Id" >{{item.Subject}}</md-option>

                            </md-select>
                          </md-field>
                        </div>
                      </div>
                        <!-- <md-field>
                            <label for="gender">性别</label>
                                <md-select name="gender" id="gender" v-model="article.Sex" md-dense  >
                                    <md-option :value="0">男</md-option>
                                    <md-option :value="1">女</md-option>
                                </md-select>
                          </md-field> -->
                        <md-field>
                            <p class="input-lable">项目截止日期 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
                            <DatePicker type="date" placeholder="Select date"  v-model="article.Start"  ></DatePicker>  
                            <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
                            <DatePicker  type="date" placeholder="Select date" v-model="article.End" @on-change="dateChage"></DatePicker> 
                        </md-field>
                        <div>
                            <Upload v-if=" !tpl"
                                type="drag"
                                :action="actionUrl"
                                :max-size="5120"
                                :show-upload-list="false"
                                :headers="uploadData"
                                :on-error="uploadErrHandler"
                                :on-success="uploadSuccessHandler">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                    <p>点击或拖拽文件到此处上传</p>
                                    <!-- <p>点击上传文件</p> -->
                                </div>
                            </Upload>
                            <div class="ivu-upload-list">
                                <ul class="ivu-upload-list">
                                    <li class="ivu-upload-list-file ivu-upload-list-file-finish" 
                                        v-for="item in article.ImsProjectAttachment" :key="item.Id">
                                        <span>
                                            <i class="ivu-icon ivu-icon-ios-document-outline "></i>
                                            {{ item.Name }} 
                                            <i class="ivu-icon ivu-icon-ios-close ivu-upload-list-remove" @click="removeFile(item)"></i>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                     </md-card-content>
                    </md-card>
                </div>
            </TabPane>
            <TabPane name="1"  ref="pane1"  label="项目成员信息">
                <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目完成人信息</div>
                    </md-card-header>

                    <md-card-content>
                      <ButtonGroup shape="circle">
                                <!-- <Tooltip content="添加经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-add" ghost @click="addUserGroup">
                                        添加项目组成员
                                        </Button>
                                <!-- </Tooltip> -->
                                <!-- <Tooltip content="移除经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-remove" ghost @click="removeUserGroup">
                                        移除项目组成员
                                        </Button>
                                <!-- </Tooltip> -->
                                </ButtonGroup>
                      <template v-for="item in article.ImsProjectGroup"> 
                        <div class="" :key="item.Id">
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="first-name">{{item.Title}}</label>
                                        <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="item.UserName"  />
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="gender">性别</label>
                                        <md-select name="gender" id="gender" v-model="item.Sex" md-dense  >
                                            <md-option :value="0">男</md-option>
                                            <md-option :value="1">女</md-option>
                                        </md-select>
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="grade">年 级</label>
                                            <md-select v-model="item.Grade" name="grade" id="grade" >
                                                <md-option v-for="year in years" :value="year" :key="year">{{year}}</md-option>
                                            </md-select>
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field>
                                        <label>学院</label>
             
                                        <md-select v-model="item.College" name="college" id="college" @md-selected="collegeChangeHandler">
                                          <md-option v-for="item in college" :value="item.Name" :key="item.Id" >{{item.Name}}</md-option>
                                        </md-select>
                                    </md-field>
                                </div>
                            </div>
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="major">专业</label>
                                        <!-- <md-input name="class" id="class" autocomplete="class" v-model="item.Major"  /> -->
                                        <md-select  v-model="item.Major" name="major" id="major">
                                          <md-option v-for="item in marjor" :value="item.Name" :key="item.Id" >{{item.Name}}</md-option>

                                        </md-select>
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="class">班级</label>
                                        <!-- <md-input name="class" id="class" autocomplete="class" v-model="item.Class"  /> -->
                                        <md-select   v-model="item.Class" name="class" id="class">
                                          <!-- <md-option v-for="item in clases" :value="item.Name" :key="item.Id" >{{item.Name}}</md-option> -->
                                          <md-option v-for="item in computeClass(item.Major)" :value="item" :key="item" >{{item}}</md-option>
                                        </md-select>
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="no">学号</label>
                                        <md-input name="no" id="no" autocomplete="no" v-model="item.No"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="idcard">身份证号</label>
                                        <md-input name="idcard" id="idcard" autocomplete="idcard" v-model="item.IdCard"  />
                                    </md-field>
                                </div>
                            </div>
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="phone">联系电话</label>
                                        <md-input name="phone" id="phone" autocomplete="phone" v-model="item.Phone"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                  <md-field >
                                      <label for="email">电子邮件</label>
                                      <md-input name="email" id="email" autocomplete="email" v-model="item.Email"  />
                                  </md-field>
                                </div>
                            </div>
                            
                        </div>
                      </template>
                        
                    </md-card-content>
                    <md-card-actions>
                    </md-card-actions>
                </md-card>
                </div>
            </TabPane>
            <TabPane name="2"   ref="pane2"  label="项目指导老师信息">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目指导老师信息</div>
                    </md-card-header>
                    <md-card-content>
                       <ButtonGroup shape="circle">
                                <!-- <Tooltip content="添加经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-add" ghost @click="tutorsAddHandler">
                                        添加指导老师信息
                                        </Button>
                                <!-- </Tooltip> -->
                                <!-- <Tooltip content="移除经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-remove" ghost @click="tutorsDeleteHandler">
                                        移除指导老师信息
                                        </Button>
                                <!-- </Tooltip> -->
                                </ButtonGroup>
                      <template v-for="item in article.ImsTotur"> 
                        <div class="" :key="item.Id">
                            <div class="md-layout md-gutter">
                              <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="first-name">校内/校外</label>
                                        <md-select name="Type" id="Type" v-model="item.Type"  >
                                          <md-option :value="0">校内导师</md-option>
                                          <md-option :value="1">校外导师</md-option>
                                        </md-select>
                                    </md-field>
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="first-name">导师姓名</label>
                                        <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="item.Name"  />
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                    <label for="gender">性别</label>
                                    <md-select name="Sex" id="Sex" v-model="item.Sex"  >
                                        <md-option :value="0">男</md-option>
                                        <md-option :value="1">女</md-option>
                                        </md-select>
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="grade">年 龄</label>
                                        <md-input name="grade" id="grade" autocomplete="grade" v-model="item.Age" />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="class">职称</label>
                                        <md-input name="class" id="class" autocomplete="class" v-model="item.Title"  />
                                    </md-field>
                                </div>
                            </div>
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="college">职务</label>
                                        <md-input name="college" id="college" autocomplete="college" v-model="item.Job"  />
                                        <!-- <md-input name="college" id="college" autocomplete="college" v-model="item.College" disabled  /> -->
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="phone">{{computeToturDeptTitle(item.Type)}}</label>
                                        <md-input name="phone" id="phone" autocomplete="phone" v-model="item.Org"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="no">联系电话</label>
                                        <md-input name="no" id="no" autocomplete="no" v-model="item.Phone"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="idcard">QQ</label>
                                        <md-input name="idcard" id="idcard" autocomplete="idcard" v-model="item.Mobile"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="email">电子邮件</label>
                                        <md-input name="email" id="email" autocomplete="email" v-model="item.Email"  />
                                    </md-field>
                                </div>
                            </div>
                            
                        </div>
                      </template>
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="3"  ref="pane3"  label="项目简介">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目简介</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <label>主要包括项目实施目的、背景、内容、可行性分析、步骤及预期效果等，要求3000字以内；另请用50字以内的文字概述项目的创新特色</label>
                                <md-textarea v-model="article.Desc" :md-counter="800"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="4"  ref="pane3"  label="项目计划书正文">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目计划书正文</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目计划书正文</label>
                                <md-textarea v-model="article.Content" :md-counter="3200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="5"  ref="pane4"  label="项目经费预算表">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目经费预算表</div>
                    </md-card-header>

                    <md-card-content>
                        <Form :model="article" ref="budgetForm"  label-position="left">
                            <Row>
                            <Col span="24">
                            <FormItem  label="经费预算"  :label-width="80">
                                <ButtonGroup shape="circle">
                                <!-- <Tooltip content="添加经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-add" ghost @click="budgetOkBtnHandler">
                                        添加
                                        </Button>
                                <!-- </Tooltip> -->
                                <!-- <Tooltip content="移除经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-remove" ghost @click="delBudgetHandler">
                                        移除
                                        </Button>
                                <!-- </Tooltip> -->
                                </ButtonGroup>
                                <span style="margin-left:25px;">总额： {{article.Budget}}</span>
                            </FormItem>
                                <div  v-for="(node, index) in article.ImsBudget" :key="node.Id" required>
                                <Row :gutter="15">
                                <Col span="6">
                                    <FormItem
                                    :label-width="100"
                                    :label="'资金用途 ' + (index+1)"
                                    :prop="'ImsBudget.' + index + '.Name'"
                                    :rules="{required: true, message: '资金用途 ' + (index+1) +'是必填项', trigger: 'blur'}"
                                    >
                                    <Input type="text" v-model.trim="node.Name" placeholder="请输入资金用途..."></Input>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem
                                    :label-width="100"
                                    :label="'预算金额(元)'"
                                    :prop="'ImsBudget.' + index + '.Budget'"
                                    :show-message="false"
                                    required
                                    >
                                    <InputNumber v-model.number="node.Budget" @on-change="budgetChange" :min="0"></InputNumber>
                                    </FormItem>
                                </Col>
                                <Col span="10">
                                    <FormItem
                                    label="说明"
                                    :label-width="60"
                                    :prop="'ImsBudget.' + index + '.Remark'"
                                    >
                                    <Input type="text" v-model.trim="node.Remark" placeholder="用途说明"></Input>
                                    </FormItem>
                                </Col>
                                </Row>
                            </div>
                            </Col>
                            </Row>
                        </Form>
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            
        </Tabs>
    </Card>
</template>
<script>
import { newApiParams, GUID, sectionToChinese } from '@/common/utils';
import { SERVER_CPT_URL } from '@/api/config';
// import { MdField } from 'vue-material/dist/components';
import { mapState } from 'vuex';
export default {
  name: 'Chuangxin',
  //   components: {
  //     'md-field': MdField
  //   },
  data () {
    return {
      tab: {
        extraLabel: '下一页',
        value: '0'
      },
      article: {
        SequenceId: this.$route.params.sequence,
        ProjectType: 0, 
        Start: new Date(),
        ImsBudget: [],
        Budget: 0,
        ImsProjectGroup: [],
        ImsTotur: [
          {
            'Id': GUID(),
            'Seq': 0,
            'Type': 0,
            'Sex': 0
          }
        ],
        ImsProjectAttachment: []
      },
      group: [],
      tutors: [],
      allTutors: [],
      selectTutor: [],
      charge: {
        total: 0,
        item: [],
        flag: false,
        budget: {
          Name: '',
          Remark: '',
          Budget: 1,
          Id: GUID()
        }
      },
      marjor: [],
      title: [],
      subject: [],
      college: []
    };
  },
  props: {
    tpl: {
      type: Boolean,
      default: () => false
    },
    ath: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    user () {
      return this.$store.state.app.userInfo;
    },
    actionUrl () {
      return SERVER_CPT_URL + '/upload/fileupload';
    },
    uploadData () {
      return {
        Authorization: localStorage.getItem('token')
      };
    },
    addmode () {
      return !!this.$route.params.addMode;
    },
    editable () {
      return !!this.$route.params.editable;
    },
    years () {
      let myDate = new Date(); 
      let startYear = myDate.getFullYear() - 3;//起始年份 
      let endYear = myDate.getFullYear() - 1;//结束年份 
      let year = [];
      for (let i = startYear; i <= endYear; i++) { 
        year.push(i.toString());
      }
      return year;
    }
    // clases () {
    //   return JSON.parse(JSON.stringify(this.marjor));
    // }
  },
  methods: {
    computeToturDeptTitle (val) {
      return val !== 0 ? '工作单位' : '部门';
    },
    computeClass (val) {
      if (val) {
        let arry = ['', '1班', '2班', '3班', '4班', '5班', '6班', '7班', '8班'];
        return arry.map(function (item) {
          return val + item;
        });
      }
      return [];
    },
    subjectChangehandler (val) {
      for (let k = 0; k < this.subject.length; k++) {
        if (val === this.subject[k].Code) {
          this.article.SubjectName = this.subject[k].Subject;
        }
      }
    },
    uploadErrHandler (err) {
    //   console.log(err);
      this.$Message.error(err);
    },
    // collegeFilter (id, name) {
    //   return [id, name].join('&&');
    // },
    collegeResolve (value) {
      for (let k = 0; k < this.college.length; k++) {
        if (this.college[k].Name === value) {
          return this.college[k];
        }
      }
      // return String(value).split('&&');
    },
    collegeChangeHandler (value) {
      console.log(value);
      // let val = this.collegeResolve(value);
      // console.log(val);
      // // if (valArr.length === 2) {
      // this.article.DeptId = val.Id;
      // this.article.DeptName = val.Name;
      // for (let k = 0; k < this.article.ImsProjectGroup.length; k++) {
      //   this.article.ImsProjectGroup[k].DeptId = val.Id;
      //   this.article.ImsProjectGroup[k].College = val.Name;
      // }
      // }
      this.getMajor(value);
    },
    getMajor (dept) {
      this.$api.GetAllMajors({ pagesize: -1, page: 1, query: { 'DeptName': dept } }).then(res => {
        if (res.code === 0) {
          this.marjor = res.Data.list;
        }
      }, err => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    getTitle () {
      this.$api.GetAllTitles().then(res => {
        if (res.code === 0) {
          this.title = res.Data;
        }
      }, err => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    getSubject () {
      this.$api.GetAllSubject({ pagesize: -1, page: 1 }).then(res => {
        if (res.code === 0) {
          this.subject = res.Data.list;
        }
      }, err => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    getCollege () {
      this.$api.GetDept().then(
        res => {
          if (!res.error) {
            this.college = res.Data.tabledata;
            // this.total = this.dataAll.length;
            // this.zNodes = res.Data.treedata;
            // $.fn.zTree.init($("#treeD"), this.setting, this.zNodes);
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          if (err) {
            this.$Message.error(err);
          }
        });
    },
    uploadSuccessHandler (response, file, fileList) {
    //   alert(response);
      console.log(response);
      let data = JSON.parse(response.jdata);
      this.article.ImsProjectAttachment.push({
        Id: GUID(),
        Name: data.name,
        Size: data.size,
        Url: data.fid,
        Type: 0,
        Remark: data.suffix
      });
    },
    removeFile (item) {
    //   console.log(item);
      let idx = -1;
      for (let k = 0; k < this.article.ImsProjectAttachment.length; k++) {
        if (this.article.ImsProjectAttachment[k].Id === item.Id) {
          idx = k;
        }
      }
      
      if (idx !== -1) {
        this.$api.DeleteFile({ Fid: item.Url }).then(res => {
          this.$delete(this.article.ImsProjectAttachment, idx);
        }, err => {
          if (err) {
            this.$Message.error(err);
          }
        });
      }
    },
    turorChange (val) {
      for (let k = 0; k < this.allTutors.length; k++) {
        if (val === this.allTutors[k]['Id']) {
          this.article.TutorName = this.allTutors[k]['Abbr'];
          break;
        }
      }
    },
    QueryTutor () {
      let params = newApiParams();
      params.query.roleName = '导师';
      this.$api.QueryUsersByRoleNameAndDept(params).then((res) => {
        if (Array.isArray(res.Data) && res.Data.length > 0) {
          this.allTutors = res.Data;
        } else {
          console.log(res);
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
        }
      });
    },
    // 初始化项目组， 将申报人作为第一项目负责人
    initGroup () {
      this.article.ImsProjectGroup.push({
        'Id': GUID(),
        'UserName': this.user.Abbr,
        'Sex': this.user.Sex,
        'Grade': '',
        'Class': '',
        'College': this.user.Dept[0].Name,
        'Phone': this.user.Mobile,
        'No': '',
        'Seq': this.article.ImsProjectGroup.length,
        'Title': '第' + sectionToChinese(this.article.ImsProjectGroup.length + 1) + '完成人'
      });
      this.article.DeptId = this.user.Dept[0].Id;
      this.article.DeptName = this.user.Dept[0].Name;
    },
    addUserGroup () {
      this.article.ImsProjectGroup.push({
        'Id': GUID(),
        'UserName': '',
        'Sex': 0,
        'Grade': '',
        'Class': '',
        'College': '',
        'Phone': '',
        'No': '',
        'Seq': this.article.ImsProjectGroup.length,
        'Title': '第' + sectionToChinese(this.article.ImsProjectGroup.length + 1) + '完成人'
      });
    },
    removeUserGroup () {
      this.article.ImsProjectGroup.pop();
    },
    initTutors () {
      
    },
    tutorsAddHandler () {
      this.article.ImsTotur.push({
        'Id': GUID(),
        'Type': 0,
        'Sex': 0,
        'Seq': this.article.ImsTotur.length
      });
    },
    tutorsDeleteHandler () {
      this.article.ImsTotur.pop();
    },
    dateChage () {
    //   console.log(typeof this.article.Start);
      if (this.article.Start.getTime() >= this.article.End.getTime()) {
        this.$Message.warning('请填写正确的起止日期！');
        this.article.End.setDate(this.article.Start.getDay() + 30);
      }
    },
    next () {
      switch (this.tab.value) {
      case '0':
        if (this.article.Name && this.article.Start && this.article.End) {
        //   console.log('下一步');
          this.tab.value = '1';
        //   this.$refs['pane1'].click();
        } else {
          this.$Message.warning('请补充信息');
        }
        break;
      case '1':
        if (!this.checkGroup()) {
          this.$Message.warning('请补充项目成员信息！');
        //   this.tab.value = '1';
        } else {
          this.tab.value = '2'; 
        }
        break;
      case '2':
        if (!this.checkTutor()) {
          this.$Message.warning('请补充项目指导老师信息！');
          // this.tab.value = '2';
        } else {
          this.tab.value = '3'; 
        }
        break;
      case '3':
        if (!this.checkDesc()) {
          this.$Message.warning('请补充项项目简介！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '4'; 
        }
        break;
      case '4':
        if (!this.checkContent()) {
          this.$Message.warning('请补充项目计划书正文！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '5'; 
        }
        break;
      }
    },
    checkGroup () {
      // if (this.article.ImsProjectGroup.length <= 0) {
      //   return false;
      // }
      // let creater = this.article.ImsProjectGroup[0];
      // if (creater.UserName && creater.Id && creater.Email && creater.Sex !== '' && creater.Grade && creater.Class && creater.College &&
      //    creater.Phone && creater.No) {
      //   return true;
      // }
      // return false;
      return this.article.ImsProjectGroup.length > 0;
    },
    checkTutor () {
      // return !!this.article.TutorId;
      return this.article.ImsTotur.length > 0;
    },
    checkContent () {
      return !!this.article.Content;
    },
    checkBudget () {
      if (this.article.ImsBudget.length > 0 && this.$refs['budgetForm'].validate()) {
        return true;
      }
      return false;
    },
    checkDesc () {
      return !!this.article.Desc;
    },
    submit () {
      if (!(this.article.Name && this.article.Start && this.article.End)) {
        this.$Message.warning('请补充项目基本信息！');
        this.tab.value = '0';
        return;
      }
      if (!this.checkGroup()) {
        this.$Message.warning('请补充项目成员信息！');
        this.tab.value = '1';
        return;
      }
      if (!this.checkTutor()) {
        this.$Message.warning('请补充项目指导老师信息！');
        this.tab.value = '2';
        return;
      }
      if (!this.checkDesc()) {
        this.$Message.warning('请补充项项目简介！');
        this.tab.value = '3';
        return;
      }
      if (!this.checkContent()) {
        this.$Message.warning('请补充项目计划书正文！');
        this.tab.value = '4';
        return;
      }
      if (!this.checkBudget()) {
        this.$Message.warning('请填写项目经费预算表！');
        // this.tab.value = '4';
        return;
      }

      if (this.addmode) {
        console.log('addmode');
        this.$api.AddImsProject(this.article).then((res) => {
          console.log(res);
          this.$Message.success('保存成功！');
          this.disableRepeatClick = false;
          setTimeout(() => {
            this.$router.push({
              name: '项目申请'
            });
          }, 500);
        }).catch((err) => {
          if (err) {
            console.log(err);
            this.$Message.error(err);
            this.disableRepeatClick = false;
          }
        });
      } else {
        this.disableRepeatClick = true;
        this.$api.UpdateImsProject(this.article).then((res) => {
          this.$Message.success('保存成功！');
          this.disableRepeatClick = false;
          setTimeout(() => {
            this.$router.push({
              name: '项目申请'
            });
          }, 500);
        }).catch((err) => {
          if (err) {
            this.$Message.error(err, 4);
            this.disableRepeatClick = false;
          }
        });
      }
    },
    addBudgetHandler () {
      this.charge.flag = true;
    },
    budgetOkBtnHandler () {
      let item = {
        Id: GUID(),
        Name: '',
        Remark: '',
        Budget: 1,
        Status: 1,
        Utime: new Date(),
        Ctime: new Date()
      };
      this.article.ImsBudget.push(item);
      // this.charge.budget = {
      //   Id: GUID(),
      //   Name: '',
      //   Remark: '',
      //   Budget: 1
      // };
      this.budgetChange();
    },
    delBudgetHandler (node) {
      this.article.ImsBudget.pop();
      this.budgetChange();
    },
    budgetChange (val) {
      this.article.Budget = 0;
      for (let k = 0; k < this.article.ImsBudget.length; k++) {
        this.article.Budget += this.article.ImsBudget[k].Budget;
      }
    },
    goback () {
      setTimeout(() => {
        this.$router.push({
          name: this.nav.back
        });
      }, 500);
    }
  },
  mounted () {
    this.initGroup();
    this.QueryTutor();
    // this.getMajor();
    this.getTitle();
    this.getSubject();
    this.getCollege();
    if (this.tpl) {
      this.$api.GetImsProjectById(this.ath.Id).then(res => {
        if (res.code === 0) {
          console.log(res.Data);
          this.article = res.Data;
        }
      });
    } else {
      if (!this.addmode) {
        if (!this.user || !this.$route.params.project) {
          this.goback();
        } else {
          this.$api.GetImsProjectById(this.$route.params.project.Id).then(res => {
            if (res.code === 0) {
              console.log(res.Data);
              this.article = res.Data;
            }
          });
        }
        
      // this.article = this.$route.params.project;
      }
    }
    
    // this.initTutors();
  }
};
</script>
<style scoped>
input {
    max-width: 100%;
    border-radius: 0;
    font: inherit;
    background-color: transparent;
    border-style: none;
    flex: 1 1 auto;
    line-height: 20px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0px;
    width: 100%;
}
input:active {
    border-style: none;
}
.tab_content {
    margin: 5px;
    line-height: 1.5em;
}
.input-lable {
    vertical-align: middle;
}
.md-textarea {
    min-height: 600px !important;
}
</style>

